<template>
	<view class="from-app-back-button">
		<button class="from-app-back-button__menu-button" open-type="launchApp" @error="launchAppError" @launchapp="onLaunchappSuccess($event)">
			<image class="from-app-back-button__menu-icon" :src="textStyle === 'white' ? ('../../static/images/' + leftButtons[0].lightIconName + '.png'):('../../static/images/' + leftButtons[0].darkIconName + '.png')" mode="aspectFit"></image>
		</button>
	</view>
</template>

<script>
	import { navigationBarOptions } from '@/global/global'
	export default {
		name:"from-app-back-button",
		props: {
			appParameter: {
				type: Object,
				default: {}
			},
			textStyle: {
				type: String,
				default: navigationBarOptions && navigationBarOptions.navigationBarTextStyle ? navigationBarOptions.navigationBarTextStyle:"black",
				validator: (val) => {
					if(val === "black" || val === "white") {
						uni.setNavigationBarColor({
							frontColor: val === "black" ? "#000000":"#ffffff",
							backgroundColor: "transparent"
						})
						return true
					} else {
						throw new Error("custom-nav-bar 组件的 navigationBarTextStyle 属性的值只能取 'black' 或者 'white'。")
					}
				}
			},
			leftButtons: {
				type: Array,
				default: navigationBarOptions && navigationBarOptions.leftButtons ? navigationBarOptions.leftButtons:[],
				validator: (val) => {
					if(!val) {
						val = []
					}
					if(val.length > 2) {
						throw new Error("custom-nav-bar 组件的 leftButton数量不能超过两个。")
					}
					return true
				}
			},
		},
		data() {
			return {
				
			};
		},
		methods: {
			launchAppError: function(err) {
				uni.reLaunch({
					url: "/pages/index/index",
					complete: (res) => {
						getApp().globalData.isFromApp = false
					}
				})
			},
			onLaunchappSuccess: function(event) {
				uni.reLaunch({
					url: "/pages/index/index",
					complete: (res) => {
						getApp().globalData.isFromApp = false
					}
				})
			}
		}
	}
</script>

<style scoped>
	.from-app-back-button {
		flex-shrink: 0;
		width: var(--capsule-menu-height);
		height: var(--capsule-menu-height);
		margin-top: var(--capsule-menu-vertical-gap);
		margin-left: var(--capsule-menu-horizontal-gap);
	}
	
	button::after {
		border: none !important;
	}
	
	.from-app-back-button__menu-button {
		flex: 1;
		height: 100% !important;
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent !important;
	}
	
	.from-app-back-button__menu-icon {
		width: 100%;
		height: 60%;
	}
</style>